/**
 * 备选坐席弹窗
 * @email 626097912@qq.com
 * Created by dength on 2017/04/24
 */
import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    Modal,
    StyleSheet,
    Platform,
    ScrollView,
    TouchableOpacity,
    Image,
    Alert
} from 'react-native';
import Constants from '../../base/constants';
import CheckBox from 'react-native-check-box';
import keys from './seat.json'

export default class SeatCategory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataArray: []
        }
    }
    //关闭
    onResult() {
        this.props.onHideSeatCategory();
    }
    //提交
    Submit() {
        Alert.alert(
           JSON.stringify(this.state.dataArray)
        );
    }

    componentDidMount() {
        this.loadData();
    }

    loadData() {
        this.setState({
            dataArray: keys
        })
    }

    onClick(data) {
        data.checked = !data.checked;
    }

    renderView() {
        if (!this.state.dataArray || this.state.dataArray.length === 0) return;
        var len = this.state.dataArray.length;
        var views = [];
        for (var i = 0, l = len - 2; i < l; i += 2) {
            views.push(
                <View key={i}>
                    <View style={styles.item}>
                        {this.renderCheckBox(this.state.dataArray[i])}
                        {this.renderCheckBox(this.state.dataArray[i + 1])}
                    </View>
                    <View style={styles.Choices_xian} />
                </View>
            )
        }
        views.push(
            <View key={len - 1}>
                <View style={styles.item}>
                    {len % 2 === 0 ? this.renderCheckBox(this.state.dataArray[len - 2]) : null}
                    {this.renderCheckBox(this.state.dataArray[len - 1])}
                </View>
            </View>
        )
        return views;

    }

    renderCheckBox(data) {
        var leftText = data.name;
        return (
            <CheckBox
                style={{ flex: 1, padding: 10 }}
                onClick={() => this.onClick(data)}
                isChecked={data.checked}
                leftText={leftText}
                checkedImage={<Image source={require('../../images/ic_radio.png')}
                    style={{ width: 22, height: 22 }} />}
                unCheckedImage={<Image source={require('../../images/ic_unradio.png')}
                    style={{ width: 22, height: 22 }} />}
                />);
    }

    render() {
        let { showSeatCategory } = this.props;
        return (
            <View>
                <Modal
                    animationType='slide'
                    transparent={true}
                    visible={showSeatCategory}
                    onShow={() => { } }
                    onRequestClose={() => { } } >
                    <View style={styles.modalStyle}>
                        <View style={styles.box}>
                            <View style={styles.actionBar}>
                                <View style={styles.actionBar_box}>
                                    <TouchableOpacity
                                        onPress={this.onResult.bind(this)}
                                        activeOpacity={0.8}
                                        style={{ width: 50, height: 39, justifyContent: 'center' }}
                                        >
                                        <Text style={styles.actionBar_box_text}>取消</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        onPress={this.Submit.bind(this)}
                                        activeOpacity={0.8}
                                        style={{ width: 50, height: 39, justifyContent: 'center', alignItems: 'flex-end' }}
                                        >
                                        <Text style={styles.actionBar_box_text}>确定</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style={styles.prompt}>
                                <View style={styles.prompt_box}>
                                    <Text style={styles.prompt_box_text}>请选择座位类别:</Text>
                                </View>
                            </View>
                            <View style={styles.Choices}>
                                <View style={styles.Choices_box}>
                                    {this.renderView()}
                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

SeatCategory.propTypes = {
    showSeatCategory: PropTypes.bool.isRequired,
    onShowSeatCategory: PropTypes.func.isRequired,
    onHideSeatCategory: PropTypes.func.isRequired
};

var styles = StyleSheet.create({
    modalStyle: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
    },
    box: {
        width: Constants.window.width, backgroundColor: 'white', position: 'absolute', bottom: 0, left: 0, height: 305
    },
    actionBar: {
        height: 39, backgroundColor: '#FF8B00', width: Constants.window.width,
    },
    actionBar_box: {
        marginLeft: 23, marginRight: 23, justifyContent: 'space-between', flexDirection: 'row', width: Constants.window.width - 46
    },
    actionBar_box_text: {
        color: 'white', fontSize: 12
    },
    prompt: {
        backgroundColor: '#FFF7DC', width: Constants.window.width, height: 21, justifyContent: 'center'
    },
    prompt_box: {
        marginLeft: 15
    },
    prompt_box_text: {
        color: '#555555', fontSize: 12
    },
    //座位类别
    Choices: {
        width: Constants.window.width, height: 205
    },
    Choices_box: {
        marginTop: 5, marginLeft: 25, marginRight: 25, marginBottom: 15
    },
    Choices_box_li: {
        height: 37, flexDirection: 'row'
    },
    Choices_xian: {
        borderBottomWidth: 1, borderBottomColor: '#DCDEDF',
    },

    item: {
        flexDirection: 'row',
    },
});


//解决IOS部分样式不兼容
// iOS Styles
var iosStyles = StyleSheet.create({

})
// Android styles
const androidStyles = StyleSheet.create({

})
const sliderStyles = (Platform.OS === 'ios') ? iosStyles : androidStyles;